@import "variable";
//文字超过2行
%ov2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

//弹性布局
%flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  &:before,
  &:after {
    display: flex;
  }

}


//1像素边框



%hairLine {
  position: relative;
  &:after{
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border: 0 solid $borderColor;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}

%bt1 {
  @extend %hairLine;
  &:after {
    border-top-width: 1px;
  }
}

%br1 {
  @extend %hairLine;
  &:after {
    border-right-width: 1px;
  }
}

%bb1 {
  @extend %hairLine;
  &:after {
   border-bottom-width: 1px;
  }
}

%bl1 {
  @extend %hairLine;
  &:after {
    border-left-width: 1px;
  }
}

%btb1 {
  @extend %hairLine;
  &:after{
    border-width: 1px 0;
  }
}

%blr1{
  @extend %hairLine;
  &:after{
    border-width:0 1px;
  }
}


// x轴原点
%start {
  @extend %flex;
  justify-content: flex-start;
}

// x轴居中
%center {
  @extend %flex;
  justify-content: center;
}

// x轴反方向
%end {
  @extend %flex;
  justify-content: flex-end;
}

// x轴平分
%space-between {
  @extend %flex;
  justify-content: space-between;
}

// x轴有间隔地平分
%space-around {
  @extend %flex;
  justify-content: space-around;
}

// 顶部对齐
%top {
  @extend %flex;
  align-items: flex-start;
}

// 居中对齐
%middle {
  @extend %flex;
  align-items: center;
}

// 底部对齐
%bottom {
  @extend %flex;
  align-items: flex-end;
}


%tran50 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


%mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent;
}


%tsf50 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
